<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>课程信息</span>
        <el-button style="float: right; padding: 3px 0" @click="startEdit" type="text">编辑</el-button>
      </div>
      <div>
        <div class="info-item">
          <p class="info-colum">
            <label>课程编号:</label>
            <span v-text="scheduleInfo.nid"></span>
          </p>
          <p class="info-colum">
            <label>课程名称:</label>
            <span v-text="scheduleInfo.coursename"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>任课教师编号:</label>
            <span v-text="teInfo.nid"></span>
          </p>
          <p class="info-colum">
            <label>任课教师名称:</label>
            <span v-text="teInfo.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>课程性质:</label>
            <span v-text="scheduleInfo.coursenature"></span>
          </p>
          <p class="info-colum">
            <label>课程周长:</label>
            <span v-text="scheduleInfo.week"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>所属专业编号:</label>
            <span v-text="spInfo.nid"></span>
          </p>
          <p class="info-colum">
            <label>所属专业名称:</label>
            <span v-text="spInfo.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>上课时间:</label>
            <span v-text="scheduleInfo.time"></span>
          </p>
          <p class="info-colum">
            <label>上课地点:</label>
            <span v-text="scheduleInfo.address"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>课程总学分:</label>
            <span v-text="scheduleInfo.zxf"></span>
          </p>
          <p class="info-colum">
            <label>课程总绩点:</label>
            <span v-text="scheduleInfo.zjd"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>上课班级编号:</label>
            <span v-text="clInfo.nid"></span>
          </p>
          <p class="info-colum">
            <label>上课班级名称:</label>
            <span v-text="clInfo.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>所属学年:</label>
            <span v-text="scheduleInfo.year"></span>
          </p>
        </div>
        <p class="info-colum">
          <label>所属学期:</label>
          <span v-text="scheduleInfo.xq"></span>
        </p>
      </div>
    </el-card>
    <div :class="['alertBg',isEdit?'show':'']">
      <div class="alertForm">
        <el-form label-width="80px">
          <div style="display:flex">
            <el-form-item label="课程名字">
              <el-input v-model="editSubmitForm.coursename"></el-input>
            </el-form-item>
            <el-form-item label="课程性质">
              <el-input v-model="editSubmitForm.coursenature"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="任课老师">
              <el-cascader
                class="cascader"
                @change="teacherCascaderChange"
                :props="teacherCascader"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="上课班级">
              <el-cascader class="cascader" @change="classCascaderChange" :props="classCascader"></el-cascader>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="所属学年">
              <el-input v-model="editSubmitForm.year"></el-input>
            </el-form-item>
            <el-form-item label="所属学期">
              <el-input v-model="editSubmitForm.xq"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="上课时间">
              <el-input v-model="editSubmitForm.time"></el-input>
            </el-form-item>
            <el-form-item label="上课地点">
              <el-input v-model="editSubmitForm.address"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="总学分">
              <el-input v-model="editSubmitForm.zxf"></el-input>
            </el-form-item>
            <el-form-item label="总绩点">
              <el-input v-model="editSubmitForm.zjd"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="上课周长">
              <el-input v-model="editSubmitForm.week"></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button @click="endEdit" type="primary">确定</el-button>
            <el-button @click="close" style="margin-left:200px">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../http";
import { handleMessage } from "../../plugins";
let year;
export default {
  data() {
    return {
      scheduleInfo: {},
      teInfo: {},
      clInfo: {},
      spInfo: {},
      isEdit: false,
      editSubmitForm: {},
      teacherCascader: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level == 0) {
              axios
                .get("rest/Department")
                .then(res => {
                  const specialty = res.data.map((value, index) => ({
                    value: value._id,
                    label: value.name,
                    leaf: node.level >= 1
                  }));
                  resolve(specialty);
                })
                .catch(err => {
                  console.log(err);
                });
            }
            if (node.level == 1) {
              axios
                .get("rest/Teacher", {
                  params: {
                    department: node.value
                  }
                })
                .then(res => {
                  const teacher = res.data.map((value, index) => ({
                    value: value._id,
                    label: value.name,
                    leaf: node.level >= 1
                  }));
                  resolve(teacher);
                })
                .catch(err => {
                  console.log(err);
                });
            }
          }, 1000);
        }
      },
      classCascader: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level == 0) {
              axios
                .get("rest/Specialty")
                .then(res => {
                  const specialty = res.data.map((value, index) => ({
                    value: value._id,
                    label: value.name,
                    leaf: node.level >= 1
                  }));
                  resolve(specialty);
                })
                .catch(err => {
                  console.log(err);
                });
            }
            if (node.level == 1) {
              axios
                .get("rest/Class", {
                  params: {
                    year: year,
                    superior: node.value
                  }
                })
                .then(res => {
                  const Class = res.data.map((value, index) => ({
                    value: value._id,
                    label: value.name,
                    leaf: node.level >= 1
                  }));
                  resolve(Class);
                })
                .catch(err => {
                  console.log(err);
                });
            }
          }, 1000);
        }
      }
    };
  },
  methods: {
    classCascaderChange(e) {
      this.editSubmitForm.specialty = e[0];
      this.editSubmitForm.class = e[1];
    },
    teacherCascaderChange(e) {
      this.editSubmitForm.teacher = e[1];
    },
    startEdit() {
      this.isEdit = true;
      this.editSubmitForm = {
        nid: this.scheduleInfo.nid,
        coursename: this.scheduleInfo.coursename,
        coursenature: this.scheduleInfo.coursenature,
        time: this.scheduleInfo.time,
        year: this.scheduleInfo.year,
        xq: this.scheduleInfo.xq,
        address: this.scheduleInfo.address,
        week: this.scheduleInfo.week,
        zxf: this.scheduleInfo.zxf,
        zjd: this.scheduleInfo.zjd,
        class: this.scheduleInfo.class._id,
        specialty: this.scheduleInfo.specialty._id,
        teacher: this.scheduleInfo.teacher._id
      };
    },
    async endEdit() {
      let res = await this.$http.put(
        `rest/Course/${this.scheduleInfo._id}`,
        this.editSubmitForm
      );
      handleMessage(this,res.data);
      this.getScheduleInfo()
      this.close();
    },
    close() {
      this.isEdit = false;
      this.editSubmitForm = {};
    },
    async getScheduleInfo() {
      let res = await this.$http.get(`rest/Course/${this.$route.params.id}`);
      this.scheduleInfo = res.data;
      this.teInfo = this.scheduleInfo.teacher;
      this.clInfo = this.scheduleInfo.class;
      this.spInfo = this.scheduleInfo.specialty;
      year = this.scheduleInfo.year;
    }
  },
  created() {
    this.getScheduleInfo();
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 800px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-colum {
  width: 50%;
  padding: 10px 0;
}
.alertBg {
  display: none;
}
.show {
  display: flex;
}
</style>